<template>
  <div id="productsDataDisplay">
    <header
      class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow"
    >
      <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">System</a>
      <button
        class="navbar-toggler position-absolute d-md-none collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#sidebarMenu"
        aria-controls="sidebarMenu"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <input
        class="form-control form-control-dark w-100"
        type="text"
        placeholder="Search"
        aria-label="Search"
      />
      <div class="navbar-nav">
        <div class="nav-item text-nowrap">
          <a class="btn" v-on:click="goTo('productsDataDisplay')">top</a>
        </div>
      </div>
    </header>

    <div class="container-fluid">
      <div class="row">
        <nav
          id="sidebarMenu"
          class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse"
        >
          <div class="position-sticky pt-3">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="btn" v-on:click="goTo('priceChanges')">
                  <span data-feather="home"></span>
                  价格走向
                </a>
              </li>

              <li class="nav-item">
                <a class="btn" v-on:click="goTo('originPrice')">
                  <span data-feather="file"></span>
                  各省均价
                </a>
              </li>
              <li class="nav-item">
                <a class="btn" v-on:click="goTo('sichuan')">
                  <span data-feather="shopping-cart"></span>
                  四川
                </a>
              </li>
              <li class="nav-item">
                <a class="btn" v-on:click="goTo('jiangxi')">
                  <span data-feather="shopping-cart"></span>
                  江西
                </a>
              </li>
              <li class="nav-item">
                <a class="btn" v-on:click="goTo('hot')">
                  <span data-feather="shopping-cart"></span>
                  行情热度
                </a>
              </li>
            </ul>
          </div>
        </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
          <div
            class="
              d-flex
              justify-content-between
              flex-wrap flex-md-nowrap
              align-items-center
              pt-3
              pb-2
              mb-3
              border-bottom
            "
          >
            <h1 class="h2">{{ msg }}</h1>

            <div class="btn-toolbar mb-2 mb-md-0">
              <div class="btn-group me-2">
                <div id="he-plugin-simple"></div>
              </div>
            </div>
          </div>

          <div id="priceChanges"><priceChanges></priceChanges></div>
          <div id="originPrice"><originPrice></originPrice></div>
          <div id="sichuan"><sichuan></sichuan></div>
          <div id="jiangxi"><jiangxi></jiangxi></div>
          <div id="hot"><hot></hot></div>
        </main>
      </div>
    </div>
  </div>
</template>
<script>
import priceChanges from "@/components/charts/priceChanges";
import originPrice from "@/components/charts/originPrice";
import sichuan from "@/components/charts/sichuan";
import jiangxi from "@/components/charts/jiangxi";
import hot from "@/components/charts/hot";
export default {
  name: "productsDataDisplay",
  data() {
    return {
      msg: "Dashboard",
      cate: "",
    };
  },
  created() {
    window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: "1",
        tmpColor: "FFFFFF",
        tmpSize: "16",
        cityColor: "FFFFFF",
        citySize: "16",
        aqiColor: "FFFFFF",
        aqiSize: "16",
        weatherIconSize: "24",
        alertIconSize: "18",
        padding: "10px 10px 10px 10px",
        shadow: "0",
        language: "auto",
        borderRadius: "7",
        fixed: "false",
        vertical: "top",
        horizontal: "left",
        key: "f42dfa77922142878dbac1e7bb051da1",
      },
    };
    const s = document.createElement("script");
    s.type = "text/javascript";
    s.src =
      "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
    document.body.appendChild(s);
  },
  methods: {
    goTo(key) {
      var PageId = document.getElementById(key);
      window.scrollTo({
        top: PageId.offsetTop,
        behavior: "smooth",
      });
    },
  },
  mounted() {},
  components: {
    priceChanges: priceChanges,
    originPrice: originPrice,
    sichuan: sichuan,
    jiangxi: jiangxi,
    hot: hot,
  },
};
</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "@/../../static/css/dashboard.css";
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.chart {
  margin: auto;
  position: relative;
}
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
</style>


